Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DATA GRID] Column header menu #3087

Merged
merged 43 commits into from
Sep 18, 2020
Merged

[DATA GRID] Column header menu #3087

merged 43 commits into from
Sep 18, 2020

Conversation

snide
Copy link
Contributor

@snide snide commented Mar 16, 2020 •
edited by kertal
Loading

Summary

Add column header menu with actions providing direct access to the following functionality:

  • Hide column
  • Sort schema asc
  • Sort schema desc
  • Move left
  • Move right

Furthermore it allows you add custom actions
Fixes #2461

image

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
  • Props have proper autodocs
  • Added documentation examples
  • Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@snide snide mentioned this pull request May 12, 2020
Closed
@cla-checker-service
Copy link

cla-checker-service bot commented Jul 20, 2020 •
edited
Loading

💚 CLA has been signed

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@snide
Copy link
Contributor Author

snide commented Jul 20, 2020

@kertal asked me to reset this PR since we had a git snafu.

@wylieconlon wylieconlon mentioned this pull request Jul 20, 2020
Closed
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kertal kertal self-assigned this Aug 3, 2020
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kertal kertal mentioned this pull request Aug 6, 2020
Closed
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kertal
Copy link
Member

kertal commented Sep 15, 2020

We should not be putting onClick events onto non-interactable elements like divs. I would assume you'd want to wrap the contents of the cell with a plain <button> element and then we can style it with CSS to maintain it's visual.

@cchaos thx, did that, ready for checking if there are more CSS adaptions necessary

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

chandlerprall
chandlerprall suggested changes Sep 17, 2020
View reviewed changes
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change making the header cell a button appears to have broken the close-popover-on-click functionality

persistent_popover

Looks like setIsPopoverOpen is called with false, but then React bubbles the click event back up to the cell's button and re-opens the popover.

While working with it I've encountered a problem in Chrome, use the mouse to expand a header cell menu, click on another one, check lot's of errors in console:

I'm going to take my pending focus trap changes and test them here to see if it is the culprit behind those maximum call stack errors.

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@chandlerprall
Copy link
Contributor

flaky unit test - jenkins test this

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

chandlerprall
chandlerprall approved these changes Sep 18, 2020
View reviewed changes
Copy link
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yessssss! Nice cleanup. Changes LGTM, tested in all the places many times 😄 Ship it! 🦑

@chandlerprall
Update CHANGELOG.md
a3075ae 
quick changelog cleanup
@kertal kertal merged commit c03ab19 into elastic:master Sep 18, 2020
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

1 similar comment
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3087/

@sulemanof sulemanof mentioned this pull request Sep 22, 2020
Merged
7 tasks
@chandlerprall chandlerprall mentioned this pull request Sep 29, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andreadelrio andreadelrio andreadelrio left review comments

@kertal kertal kertal left review comments

@chandlerprall chandlerprall chandlerprall approved these changes

Assignees

@kertal kertal

Labels
data grid feature request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[DATA GRID] Provide a clickable header menu for built in / custom actions
7 participants
@snide @kibanamachine @chandlerprall @kertal @walterra @cchaos @andreadelrio